<template>
 
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="0"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        :router="true"
      >
      <template v-for="item in menudata">
                        <el-menu-item v-if="!item.children" :index="item.path" >
                            {{item.label}}
                        </el-menu-item>
                        <el-sub-menu v-else :index="item.id">
                            <template #title>
                                <span>{{item.label}}</span>
                            </template>
                            <el-menu-item v-for="sonItem in item.children" :index="sonItem.path" >{{sonItem.label}}</el-menu-item>
                        </el-sub-menu>
                    </template>     
        <!-- <el-sub-menu index="1">
          <template #title>
            <el-icon><GoodsFilled /></el-icon>
            <span>商品管理</span>
          </template>
            <el-menu-item index="/HomePage/GoodsList"><el-icon><List /></el-icon>商品列表</el-menu-item>
            <el-menu-item index="/HomePage/QueryList"><el-icon><List /></el-icon>商品分页</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Coin /></el-icon>
            <span>轮播图管理</span>
          </template>    
            <el-menu-item index="/HomePage/list"><el-icon><List /></el-icon>轮播图列表</el-menu-item>
            <el-menu-item index="/HomePage/Add"><el-icon><List /></el-icon>轮播图添加</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><Tools /></el-icon>
            <span>权限管理</span>
          </template>    
            <el-menu-item index="/HomePage/operator"><el-icon><List /></el-icon>角色列表</el-menu-item>
            <el-menu-item index="/HomePage/Addoperator"><el-icon><List /></el-icon>权限列表</el-menu-item>
        </el-sub-menu> -->
      </el-menu>
      </el-aside>
      <el-container>
      
        <el-header>嗨购后台管理系统
        <el-button @click="exitFn" color="dodgerblue"><p class="txt2">
          <el-icon><SwitchButton /></el-icon>退出
        </p></el-button>
        </el-header>
        <el-main>
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import getMenus from '../../grants/menudata';
import getRoutes,{clearCurrentRoutes} from '../../grants/router';
const menudata = reactive(getMenus());
// console.log(menudata)
getRoutes();

const $router = useRouter();


const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const username = ref(sessionStorage.getItem("username"));

const exitFn = ()=>{
    sessionStorage.clear();
    clearCurrentRoutes();//清除当前用户的路由配置；
    $router.push("/Login");
}
</script>

<style scoped>
.common-layout {
    width: 100%;
    height: 100%;
}

.el-container {
    width: 100%;
    height: 100%;
}
.el-aside {
    width: 200px;
    height: 100%;
    background-color:rgb(84, 92, 100);
}
.el-header {
    width: 100%;
    height: 120px;
    background-color: dodgerblue;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-header {
  text-align: center;
  line-height: 90px;
  font-size: 30px;
  color: #fff;
}

.txt2 {
  display: flex;
  font-size: 14px;
  align-items: center;
  color: #fff;
}

.el-button {
  margin-bottom: 70px;
}
</style>